<template>
	
	<view class="ban" >
		<view class="swiper-item" :style="'margin-top:'+mt+'rpx;opacity:'+op">
			<view class="flex">
				<image class="baan_img" :src="rq.imgUrl(info.avater)" mode="aspectFill"></image>
				<view class="flex_center">{{info.user_name}}：{{info.status_text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0, 
				banList: [],
				info:{
					avater:'',
					user_name:'',
					status_text:'',
				},
				start_mt:140,//初始位置距顶 
				end_mt:0,//终点位置距顶 
				mt:140,//距顶 
				op:0,//透明度 
				move:null,
				timeOne:2500,//动画效果三秒切换到下一个
				rate:10,//动画频率(毫秒)
				timesIndex:0,
				spaceTime:500, //中间间隔时间(毫秒)
				fade:30,//淡入淡出(百分比) 前后30%
			}
		},
		onShow() {
			this.getData();
		},
		onLoad() {
			
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData(){
				this.currentIndex=0;
				this.getBannerList()
			},
			getBannerList(){
				this.rq.getData('daren/order_index', {}).then(res => {
					if (res.code == 1) {
						this.currentIndex=0;
						this.banList = res.data
						if(this.banList){
							this.info=this.banList[this.currentIndex]
							this.autoMove()
						}
					}
				})
			},
			autoMove(){
				var that=this
				clearInterval(this.move)
				this.move=setInterval(()=>{that.goMove()},this.rate)
			},
			goMove(){
				var times=Math.floor( this.timeOne / this.rate ) //切换下一次动画需要执行次数
				var spaceTimes=Math.floor( this.spaceTime / this.rate ) //间隔时间执行次数
				var start_mt=this.start_mt;//初始距顶
				var end_mt=this.end_mt;//终点距顶
				var d_time=Math.ceil(times*(this.fade)/100);
				var timesIndex=this.timesIndex
				if(timesIndex>=(times+spaceTimes)){
					this.timesIndex=0
					timesIndex=0
				}else{
					this.timesIndex=this.timesIndex+1
				}
				if(timesIndex>times && timesIndex<(times+spaceTimes)){
					this.op=0
					this.mt=start_mt
					return;
				}
				//步进
				var m_mt=(end_mt-start_mt)/times 
				// 淡入淡出
				if(timesIndex<d_time){
					var m_op=1/d_time
					this.op=Math.round(m_op*timesIndex*100)/100
				}else if(timesIndex>(times-d_time)){
					var m_op=1/d_time
					this.op=Math.round(m_op*(times-timesIndex)*100)/100
				}else{
					this.op=1
				}
				if(timesIndex == 0){
					//切换下一幅
					this.currentIndex=this.currentIndex+1
					if(this.currentIndex>=this.banList.length){
						this.currentIndex=0
					}
					this.info=this.banList[this.currentIndex]
				}
				this.mt=Math.round(start_mt+(m_mt*timesIndex))
			}
		},
	};
</script>

<style scoped>
	.ban{
		z-index: 9;
		width: 300rpx;
		height: 200rpx;
		overflow: hidden;
		border-radius: 28rpx;
		color: #FFF;
		position: absolute;
		/* background:  #FFF; */
		/* background:  rgba(0, 0, 0, 0.6); */
	}
	.baan_img{
		width: 60rpx; 
		height: 60rpx; 
		border-radius: 50%; 
		margin-right: 10rpx;
	}
	.swiper-item {
		position: relative;
		width: 300rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 28rpx;
		font-size: 26rpx;
		overflow: hidden;
		background:  rgba(0, 0, 0, 0.3);
		
		/* animation: fadeInOut 3s linear infinite; */
	}
	.InOut {
		animation: fadeInOut 3s forwards;
	}
	@keyframes fadeInOut {
		0% { opacity: 0; }
		40% { opacity: 1; }
		60% { opacity: 1; }
		80% { opacity: 0; }
		/* 100% { opacity: 0; } */
	}
</style>